
Processing 

di MATTED FIDRAVAI1TI 



Scopriamo come rappresentare un valore analogico 
acquisito con Arduino, realizzare interf acce grafiche e 
impariamo ad utilizzare la libreria "arduino". 
Terzapuntata. 



A bbiamo conosciuto Processing parten- 
*mdo dalle basi, scoprendo che cos'e e a 
quali ambiti si applica; dopo le prime due 
puntate, la prima delle quali propedeutica 
airapprendimento dell'uso di questo am- 
biente di sviluppo per programmi da PC 
e la seconda dedicata airinterazione con 
Arduino ed alio sviluppo di programmi 
di test utilizzabili su quest'ultimo, siamo 



giunti alia terza lezione. Qui affronteremo 
tre temi fondamentali, ossia: 

1) la rappresentazione di un valore analo- 
gico, letto sempre attraverso Arduino; 

2) la costruzione di interfacce grafiche 
usando delle immagini e delle piccole 
animazioni; 

3) l'utilizzo della libreria "arduino" di 
Processing, che ci consentira di control- 
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lare direttamente i pin e le funzionalita 
di Arduino, senza passare per la defini- 
zione di un protocollo. 

I programmi di esempio che vedremo in 
questa terza puntata del nostro corso sono 
elencati qui di seguito. 

1. LEZIONE 3_1 PULSANTE + LED + 
INDICATORE ANALOGICO - Que- 
sto codice e la naturale prosecuzione 
della lezione della seconda puntata; in 
essa, all'interfaccia con un pulsante ed 
un LED viene aggiunta una barra che 
rappresenta il valore analogico letto da 
Arduino. II codice che deve essere cari- 
cato su Arduino e: 

ardui nocodi ceTXRXANALOG . pde . 

2. LEZIONE 3_2 PULSANTE GRAFI- 
CO - Qui impariamo a costruire delle 
interfacce grafiche usando delle imma- 
gini; la tecnica adottata e molto simile 
a quella descritta nelle scorse lezioni, 
ma la differenza sostanziale e che non 
disegneremo da codice i pulsanti, i LED 
e gli indicatori, ma sfrutteremo delle 
immagini precedentemente costruite. 
Questo codice mostra come costruire 
un interruttore, che si evidenzia se ci 
portiamo sopra il puntatore del mouse e 
che commuta se vi facciamo clic. 

3. LEZIONE 3_3 INDICATORE ANALO- 
GICO GRAFICO - Questo codice serve 
a costruire un indicatore, simile ad un 
manometro, in cui c'e un'immagine di 
sfondo che rappresenta una scala gra- 
duata ed una lancetta che ruota. Tutto 

e realizzato mediante immagini prece- 
dentemente costruite e la lancetta ruota 
in funzione del valore che vogliamo 
visualizzare. 

4. LEZIONE 3_4 MANOPOLA - In questo 
programma combiniamo le due tecniche 
delle lezioni precedenti per realizzare 
una manopola, che si evidenzia quando 
il mouse la punta e che se vi facciamo 
clic e ruotiamo il mouse, essa ruota con- 
seguentemente. 

5. LEZIONE 3_5 INTERFACCIA COM- 
PLETA - In questo codice mettiamo 
insieme tutto quello che abbiamo ap- 



preso finora realizzando un'interfaccia 
completa di: interruttore, LED, mano- 
pola, indicatore analogico. L'interfaccia 
controller^ direttamente Arduino, nel 
quale dovra essere caricato il codice: 

ardui no codi ceTXRXAN AL0G_ I NOUT . pde. 

6. LEZIONE 3_6 INTERFACCIA COM- 
PLETA + FIRMDATA - Utilizzando la 
stessa interfaccia grafica del codice pre- 
cedente, andiamo ad usare la libreria 
arduino di Processing e carichiamo su 
Arduino il codice firmdata. II program- 
ma mostra come controllare direttamen- 
te Arduino da Processing. 

LEZIONE 3.1 

Questo programma e la diretta evoluzione 
del codice spiegato nella seconda puntata 
nella LEZIONE 2_4. Richiamiamo breve- 
mente cosa accadeva in quel programma: 
Arduino comunicava verso il programma 
master lo stato di un suo pulsante e faceva 
questo inviando un byte seriale in cui 
c'era il valore 1 o 0; nel caso fosse trasmes- 
so il valore 1 il codice di Processing accen- 
deva il secondo LED dell'interfaccia. 
Partendo da questa architettura, modifi- 
chiamo il codice e facciamo trasmettere ad 
Arduino non lo stato del pulsante, ma il 
valore analogico letto su ANALOG IN 0; 
dal lato Processing modifichiamo il codice 
in modo da decodificare il valore analo- 
gico ricevuto e rappresentarlo attraverso 
una barra. II codice Arduino da utilizzare 
in questa lezione e: 

ardui no codi ce TXRX ANALOG . pde, 

un file che potete scaricare dal nostro sito 
www.elettronicain.it insieme a tutti i co- 
dici di esempio descritti. Ci soffermiamo, 
quindi, unicamente sulle parti di codice 
che ci interessano. Innanzitutto definia- 
mo Tingresso analogico 0, chiamandolo 

inAnalogico. 

Nel ciclo di risposta alle interrogazioni 
del master, trasmettiamo il valore analo- 
gico letto suiringresso 0, quindi leggiamo 
il valore attraverso la funzione anaiogReado, 
e lo dividiamo per 4, in quanto Arduino 
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dispone di convertitori analogico digitali 
a 10 bit e pertanto un'escursione della 
tensione d'ingresso tra 0 e 5 V corrisponde 
a una rappresentazione numerica intera 
0-1024 (2 10 = 1024). Siccome un byte e com- 
posto da 8 bit, il valore numerico massimo 
che possiamo trasmettere sulla seriale e 
256 (2 8 = 256) ecco che dobbiamo compri- 
mere la scala dividendo tutto per quattro. 

anVal = analogRead(inAnalogico) / 4; 

II valore letto e scalato viene quindi invia- 
to via seriale attraverso l'istruzione: 

Serial .write(anVal ) ; 

Qualora avessimo voluto trasmettere il 
valore non scalato, ma rappresentativo di 
tutti e 10 i bit di conversione, avremmo 
dovuto spezzarlo trasmettendolo con due 
byte. Riportiamo nel Listato 1 le parti di 
codice di Arduino, mentre il circuito che 



utilizzeremo in questa lezione e rappre- 
sentato in Fig. 1; il relativo schema elettri- 
co si trova nella Fig. 2. Dal punto di vista 
di Processing, il codice non differisce di 
molto da quello della LEZIONE 2_4; in- 
fatti le modifiche sono minime. Quando e 
presente un dato nel buffer seriale, questo 
e letto e caricato su val: 

val = myPort.readO ; 

La barra analogica e costruita mediante un 
rettangolo, di colore rosso, la cui dimen- 
sione "x" varia in funzione del valore di 

val: 

rect(20,350,val,40); 

La porzione di codice di Processing e 
riportata nel Listato 2; le Fig. 3 e Fig. 4, ci 
mostrano come si presenta l'interfaccia 
completa. 

Occorre notare una cosa molto importante, 



int inAnalogico = 0; 



void loopO { 

//stato di lettura e scrittura della seriale 

if ( Sen al . avai 1 abl e( ) ) { // se e disponibile un dato sul buffer seriale 

di gi tal Wri te( LEDPi n[0] , HIGH); //accendi il LED 0, i denti f i cati vo del 1 o stato della comuni cazi one 

val = Sen al . read( ) ; //il valore del buffer e letto e salvato su val, una volta letto il buffer e svuotato 



anVal = anal ogRead ( i nAnal ogi co ) / 4; // lettura del 1 ' i ngresso analogico e divisione per 4, (1024/4 
Sen' al . wri te( anVal ) ; // trasmissione del valore via seriale 



256) 
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if (myPort . avai 1 abl e( )>0 ) { // se e presente un dato sul buffer seriale, 
val = myPort . read( ) ; //il dato viene letto e memorizzato su val 
myPort.cl ear( ) ; //il buffer e ripulito 

val = map (val , 0, 255, 0, 260); //il valore di ingresso varia 0-->255, la barra ha una d i mens i one 0-->260, 
//la funzione map svolge automati camente la proporzione 

} 



fill (0,0,0) ; //colore di sfondo del 1 a barra, nero 

rect(20,350,260,40) ; //sfondo del 1 a barra 

fil 1 (240,0,0) ; //colore di riempimento del 1 a barra, rosso 

rect ( 20 , 350 , val ,40) ; //la barra analogica e un rettangolo la cui larghezza e proporzi onal e al valore analo- 
gico rappresentato 

text("Analog", 20, 430); //etichetta 



ossia che una volta letto, val subisce una 
trasformazione attraverso la funzione map 

(value, lowl, highl, lowl, high!): 

val = map(val , 0, 255, 0, 260); 

in pratica map() trasforma il valore va- 
lue (che deve essere compreso tra i valori 
lowl e highl) in un corrispondente valore 
proporzionato che sara compreso tra i va- 
lori lowl e highl, come ci mostra la Fig. 5. 
Questa funzione e molto importante e 
sara ampiamente usata nelle successive 
lezioni; in questo caso val, che e per sua 
natura compreso tra 0 e 255, viene impo- 
stato tra 0 e 260. 

La motivazione di cio e unicamente di 
tipo grafico, in quanto abbiamo definito 
la larghezza della barra analogica 260 pi- 
xel, mentre se avessimo definito una barra 
piu larga (magari 500 pixel) avremmo 
dovuto impostare la funzione nel modo 
seguente: 

val = map(val , 0, 255, 0, 500); 

cosi facendo quando val = 0, la barra e tut- 
ta a 0, mentre quando val = 255, la barra 



occupera tutti i 500 pixel. 
II funzionamento del sistema e riassunto 
in Fig. 6 e Fig. 7, il pulsante dell'interfac- 
cia controlla il LED1 di Arduino, mentre 
LEDO si accende in ogni caso se e presente 
qualcosa nel buffer seriale. II trimmer 
funziona da partitore di tensione ed il va- 
lore letto dairingresso analogico 0 di Ar- 
duino viene ritrasmesso via seriale verso 
Tinterfaccia e qui rappresentato mediante 
la barra. 

LEZIONE 3.2 

Abbandoniamo per un po' l'interfaccia- 
mento e la comunicazione con Arduino, 
per concentrarci sulla costruzione di in- 
terfacce grafiche. L'obiettivo e realizzare 
pulsanti, LED, indicatori, attraverso delle 
immagini. 

Nel mese scorso abbiamo costruito delle 
interfacce sfruttando le primitive grafiche 
di Processing, che sono essenzialmente 
quadrati, rettangoli, colori e riempimenti. 
Ora realizzeremo delle interfacce combi- 
nando quanto abbiamo finora appreso, 
con la possibility di caricare immagini e 
sovrapporle. 

II codice di questa lezione si riferisce alia 



Listato 3 
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costruzione di un pulsante e la Fig. 8 ci 
mostra come si presenta l'interfaccia; in 
essa c'e un interruttore con relativo LED. 
Quando il puntatore del mouse passa so- 
pra l'interruttore, l'area corrispondente si 
evidenzia e quando facciamo clic l'inter- 
ruttore si abbassa ed il LED si accende. 
Questa funzionalita e ottenuta sempli- 
cemente con due immagini: in una c'e 
rappresentato l'interruttore in posizione 
off con a fianco il LED spento, mentre 
nell'altra immagine si trova l'interruttore 
in posizione on con il LED acceso. 
II rettangolo che viene evidenziato e 
stato gia descritto: sostanzialmente esso 
definisce l'area attiva in cui se facciamo 
clic cambieremo lo stato di una variabile 
e conseguentemente forzeremo il cari- 
camento dell'immagine corrispondente 
(interruttore on oppure interruttore off). 
Per gestire le immagini in Processing 
abbiamo bisogno delle seguenti primitive: 
PImage imgBtlOn; questo e il tipo 
di dato per le immagini, in pratica imgB- 
tlOn, e una variabile definita del tipo im- 
magine; Processing pud gestire immagini 



.png, .gif, .jpg, -tga. In questo caso, oltre a 
definire le variabili tipo int, float, defini- 
remo anche quelle Pimage; 

imgBtlOn=loadImage("button20n. 
png"); questa istruzione, come si puo fa- 
cilmente intuire, costituisce il caricamento 
vero e proprio dell'immagine nella va- 
riabile imgBtlOn che abbiamo preceden- 
temente definito; l'immagine da caricare 
deve essere contenuta nella stessa cartella 
di Processing dove e contenuto il codice; 

image(imgBtlOn, 0, 0); questa 
istruzione costituisce la visualizzazione 
dell'immagine (in questo caso nella po- 
sizione X0 e Y0); ovviamente, cambiando 
questi valori possiamo spostare l'immagi- 
ne nell'area del programma. 

Capito come si definiscono, caricano e vi- 
sualizzano le immagini, la parte di codice 
del programma che riportiamo in questa 
puntata del corso e quella visibile nel 
Listato 3. 

A cambiare il valore della variabile button 
sara il fatto che avremo fatto clic nell'area 
attiva; questo evento sara gestito dalla 
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funzione overRect(). Cio che e interessan- 
te notare e che, ad ogni ciclo, possiamo 
rappresentare un'immagine o l'altra e che 
l'effetto dell'interruttore abbassato e del 
LED acceso e dato semplicemente dalla 
sovrapposizione di due immagini. 
La costruzione delle immagini grafiche 
per le interfacce puo essere fatta con qual- 
siasi programma di disegno: quasi banal- 
mente con paint, oppure con Inkscape; 
addirittura potremmo caricare delle foto o 
combinare foto e disegni. 

LEZIONE 3.3 

Estendiamo ora l'applicazione delle im- 
magini per realizzare un indicatore analo- 
gico, tipo manometro, rappresentato nella 
Fig. 9. L'indicatore e ottenuto per mezzo 
della sovrapposizione di due immagi- 
ni, una delle quali rappresenta la scala 
graduata e sara tenuta fissa, mentre l'altra 
rappresenta la lancetta e sara fatta ruotare. 
Le immagini che ci servono sono gauge, 
png (la scala) e arrow.png (la lancetta). In 
queste applicazioni e conveniente usare 
le immagini .png, in quanto, pur essendo 
del tutto analoghe alle bitmap, hanno il 
vantaggio di poter definire il colore tra- 
sparente, come evidenziato nella Fig. 10. 
In questa stessa figura vediamo che le 
nostre immagini hanno dimensioni di 
300x300 pixel per la base e 120x120 pixel 
per la lancetta. 

Nel programma definiremo le variabili 
immagine, che sono le seguenti: 



Poi caricheremo le immagini effettive:: 



gauge = loadImage("gauge2.png") ; 
arrow = loadImage("arrow2.png") 

A questo punto vediamo che se andassimo 
a visualizzarle in questo modo: 



image (gauge, 0, 0); 
image (arrow, 0, 0); 

otterremmo quanto rappresentato nella 
Fig. 11. Tuttavia vogliamo assicurarci che 
i centri della scala e della lancetta coin- 
cidano e che la lancetta possa essere fatta 
ruotare. 

Per ottenere queste funzionalita ci ser- 
vono ancora due primitive molto impor- 
tant di Processing, che sono translateO e 
rotateO; la prima effettua una traslazione, 
mentre la seconda opera una rotazione. 
Dobbiamo pero prestare molta attenzione 
al fatto che non si riferiscono alle immagi- 
ni, ma al sistema di riferimento. 
In Processing, cio che viene traslato e ruo- 
tato e sempre il sistema di riferimento. 
La Fig. 12 illustra come avviene questo 
processo, che possiamo spiegare cosi: 
supponiamo di voler porre l'immagine 
della lancetta al centro e ruotata di 30°; 
innanzitutto trasliamo il sistema di rife- 
rimento alia coordinata 150,150. Questo 
punto ora sara la nuova origine 0,0. Ora, 
se ruotiamo tutto di 30° ruotera l'intero si- 
stema di riferimento. Se rappresentassimo 



PImage gauge; 
PImage arrow; 
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PImage gauge; //def i ni zi one del 1 ' i mmagi ne del 1 a base del 1 ' i ndi catore 
PImage arrow; //def i ni zi one del 1 ' i mmagi ne del 1 a lancetta 



i n t v a 1 ; 
f 1 oat val m ; 



//def i ni zi one del 1 a variabile che definisce la rotazione e che variera tra 0 - 255 
//def i ni zi one del 1 a variabile che definisce la rotazione e che variera tra -160 e +160 



void setup(){ 
color(RGB) ; 
strokeWei ght ( 1 ) ; 
strokeJoin(SQUARE) ; 

f i 1 1 (30) ; 
smooth ( ) ; 
size(300,300) ; 



//tipo di colore 
//spessore 1 i nee 
//tipo di spigolo: quadrato 

//grigio di sfondo 



gauge = 1 oadImage( "gauge2 . png" ) ; //ca ri camento del 1 ' i mmagi ne relativa alia base del 1 ' i ndi catore 
arrow = 1 oadImage( "arrow2 . png" ) ; //ca ri camento del 1 ' i mmagi ne relativa alia lancetta 

} 

voi d draw( ) { 

image(gauge,0,0) ; //vi sual i zzazi one del 1 ' i mmagi ne del 1 a base del 1 ' i ndi catore 

transl ate( 150 , 150 ) ; //t rasl azi one dell'origine del sistema di riferimento da X0,Y0 a X150,Y150 

va 1 =250 ; //att ri bui amo a val un valore fisso, val 0-->255 

valm = map(val , 0, 255, -160, 160); //valm e la traduzione di val in un range che va da -160 a +160 
//quando val = 0 valm = -160, quando val = 255 valm = +160 

rotateC radi ans ( val m) ) ; //rotazione del sistema di riferimento, il valore di valm (espresso in °) viene tra- 
dotto in radianti 

image(arrow, -60 , -100) ; //nel sistema di riferimento ruotato e traslato viene rappresentata 1'immagine del 1 a 
1 ancetta 



ora 1'immagine della lancetta: 

image(arrow, 0, 0) 

otterremmo quanto rappresentato dalla 
figura centrale e cioe la lancetta ruotata di 
30°. Ma rispetto alia sua origine (0,0;) per 
centrare la lancetta rispetto al centro della 
scala dobbiamo posizionarla al punto 




sing. Cambiando il valore di val, tra 0 e 
255, si nota che la lancetta percorre tutta la 
rotazione dal valore iniziale della scala a 
quello finale. 

Ad agire sulla rotazione della lancetta non 
e direttamente val, ma valm, cioe la tradu- 
zione di val che va da 0 a 255 in un valore 
che invece varia tra -160 e +160. Percio 
quando val e 0, allora valm=-160, mentre 
quando val=128 — > valm = 0 (lancetta ver- 
ticale); ancora, quando val = 255 -> valm = 
160 (fondo scala). 

Questa conversione e ottenuta per mezzo 
della funzione map() precedentemente 
descritta. 

La variabile valm rappresenta un valore 
espresso in °, ma invece la funzione rota- 
te() agisce su un valore angolare espres- 
so in radianti; il problema viene risolto 
semplicemente attraverso la funzione di 
conversione radians(). 

LEZIONE 3.4 

Avendo definito un pulsante ed un indi- 
catore grafico, realizziamo ora un altro 
strumento di input, cioe una manopola. Si 
tratta sostanzialmente di un controller ro- 
tativo funzionante cosi: quando il punta- 
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if ( ( overRect ( 10 , 10 , 100 , 100 ) ) && mousePressed ) { //se contemporaneamente il mouse e sopra 1'area del 1 a manopola 
ed il tasto sinistro e premuto 

knobRot = i nt (map(mouseX , 10 , 110, -130,130)); //rotazione, mouseX varia tra 10 e 
110, map fa la proporzione tra -130° e +130° 

valTx = i nt (map(mouseX , 10 , 110 , 0 , 255 ) ) ; //valTx potrebbe essere valore trasmesso 
via seriale, mouseX varia tra 10 e 110, viene scalato tra 0 e 255 

pri ntl n ( val Tx) ; //trasmi ssi one a terminale di valTx 

} 



rota te ( radi ans( knobRot) ) ; 
image(knob, -40,-40); 



//rotazione del sistema di riferimento in base al valore del 1 a variabile knobRot 
//vi sual i zzazi one del 1 a manopola ruotata 



tore del mouse gli passa sopra, si eviden- 
zia, mentre se vi facciamo clic muovendo 
contemporaneamente il mouse, la mano- 
pola ruota. La funzionalita corrispondente 
e illustrata nella Fig. 13. La tecnica che fa 
evidenziare il controller e sempre la stes- 
sa, ovvero usiamo la funzione overRect(). 
Per quanto riguarda la rotazione della 
manopola, invece, il principio e analogo 
alia rotazione deirimmagine della lancet- 
ta neirindicatore analogico, ma l'angolo 
di rotazione deve dipendere dallo sposta- 
mento del mouse. 

Riportiamo, nel Listato 5, la porzione 
di codice che permette di realizzare le 
funzionalita descritte. Se il mouse e sopra 
l'area attiva ed il tasto sinistro e premuto 
(mousePressed) allora si verifica: 



knobRot = int(map(mouseX,10, 110, -130,130)) 

Alia variabile knobRot, viene assegnato 
un valore che va da -130 a +130 e questo 
valore e proporzionato rispetto a 10-rlOO, 
che e l'escursione del mouse nell'area 
attiva (la posizione "x" del puntatore 
del mouse viene restituita dal parametro 
mouseX). Quando il cursore del mouse si 
trova nell'area attiva, definita nell'asse x 
da 10 a 100, ed il tasto sinistro e premuto, 
muovendo il mouse il parametro mouseX 
variera tra 10 e 100. 
La variabile knobRot rappresentera un 
angolo di rotazione che variera e tra -130° 
e +130°. Questo angolo e rappresentati- 
vo di mouseX (che, come abbiamo detto, 
varia tra 10 e 100), ma variera nel'ambito 
compreso fra -130 e +130. 



Fig. 13 



LEZIONE 3_5 

Sfruttando tutte le tecniche di 
visualizzazione, di rappresentazione e 
controllo fin qui descritte, e possibile 



//stato di decodifica del valore seriale ricevuto 

if (val == 'H') { // se il valore di val e il carattere 'H' 
digitalWrite(LEDPin[l], HIGH); // viene acceso il LED 1 

} 

if (val == 'L'){ 

digital WriteC LEDPin[l] , LOW); 

} 

if ((val >0) && (val<255)){ // se il valore seriale ricevuto e compreso tra 0 e 255 

anal ogWri te( LEDPi n[2] , val); // sul terzo pin della lista, quindi pin 10 viene rappresentato val in PWM 

} 



delay(l); // ciclo di attesa di 1 ms 
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Fig. 1H 





realizzare 
un'interfaccia 
utente com- 
pleta. L'inter- 
faccia, ripor- 
tata in Fig. 
14 e Fig. 15, 
e sostanzial- 
mente la stes- 
sa descritta 
nella seconda 
puntata, ma in questo caso il pulsante e 
stato sostituito da due immagini grafiche 
e lo stesso vale per il LED; inoltre sono 
stati aggiunti la manopola e l'indicatore 
analogico grafico. II pulsante controlla 
il LED 1 di Arduino, mentre la posizio- 
ne della manopola controlla il PWM che 
Arduino generera sul LED 2; l'indicatore 
analogico rappresenta il valore letto da 
Arduino su Analog In 0, mentre il LED 
che si accende ogni secondo rappresenta 
il momento in cui il programma comunica 
con Arduino. 

II codice Processing dell'interfaccia e 
dunque la somma dei codici qui descritti, 
solamente che le posizioni geometriche 
dei vari elementi e delle aree attive sono 
diverse. 

La Fig. 16 mostra il sistema al completo. 
II codice per Arduino che deve essere uti- 
lizzato in questa lezione pratica e conte- 
nuto nel file arduino _co dice _TXRX_ANA- 
LOG_IN_OUT.pde. 

Questo differisce dal precedente codice 
soltanto per il fatto che ha in piu la deco- 
difica del valore PWM da rappresentare 
sull'uscita. II Listato 6 contiene il codice 
per Arduino. 

LEZIONE 3.6 

Rivediamo ora lo stesso programma della 
Lezione 3_5, utilizzando pero una nuova 
tecnica di controllo di Arduino: in pratica 
sfruttiamo un'apposita libreria di Proces- 
sing che ci offre la comodissima opportu- 
nity di controllare direttamente i pin di 
Arduino da Processing, come se Arduino 
fosse una naturale estensione del PC. Cosi 
realizziamo un'interfaccia completa con 
firmdata. 

Ovviamente non basta soltanto richiama- 




re la libreria, perche dovremo anche far 
girare su Arduino un apposito programma 
chiamato firmdata. 

Ma procediamo con ordine: per prima 
cosa visitiamo la pagina web www. ardu- 
ino. cc/play ground/Interfacing/Processing, 
dalla quale scarichiamo la libreria proces- 
sing- arduino -0017 '.zip; questa deve essere 
estratta e la cartella arduino va copiata 
nella cartella libraries di Processing. 
A questo punto bisogna aprire l'editor di 
Arduino e, come mostrato dalla Fig. 17, 
accedere al percorso Examples>Firmdata 
>StandardFirmadata, quindi fare verify e 
l'upload su Arduino. 

A questo punto i programmi in Processing 
dovranno essere strutturati considerando 
che innanzitutto bisognera importare la 
libreria arduino e la libreria seriale: 

import processing. serial .*; 
import cc. arduino.*; 

Poi occorrera definire l'oggetto arduino 
della classe Arduino (questi aspetti sa- 
ranno meglio approfonditi nelle prossime 
lezioni): 

Arduino arduino; 

Ora, dentro Setup definiremo le carat- 
teristiche di comunicazione di Arduino, 
analogamente a quanto si faceva per la 
porta seriale: 

void setupO 
{ 

arduino = new ArduinoCthis, Arduino.list()[0], 57600); 

} 

Descriviamo, qui di seguito, le primitive 
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transl ate( 150 ,480) ; 
val=arduino.analogRead(0) 
valm = mapCval , 0, 1024, 



rotateC radi ans ( val m) ) ; 
dotto in radianti 



//il dato viene letto e memorizzato su val 
-160, 160); //valm e la traduzione di val in un range che va da -160 a +160 
//quando val = 0 valm = -160, quando val = 1024 valm = +160 
//rotazione del sistema di riferimento, il valore di valm (espresso in °) viene tra- 



image(arrow, 
1 ancetta 



-60,-100); //nel sistema di riferiemento ruotato e traslato viene rappresentata 1'immagine del 1 a 



che abbiamo a disposizione usando la 
libreria arduino. 

pinMode(pin, mode): setta un pin digita- 
le come ingresso o come uscita (Arduino. 
INPUT o Arduino. OUTPUT). 
Esempio: 

arduino. pi nMode(6, Ardui no. OUTPUT) ; il pin 6 di Arduino e 
settato come uscita 

arduino. pi nMode(7, Arduino. INPUT) ; il pin 7 di Arduino e setta- 
to come ingresso 

digitalRead(pin): legge lo stato di un pin 
digitale, precedentemente settato come 
ingresso, e restituisce il valore (Arduino. 
LOW o Arduino. HIGH). 
Esempio: 

arduino. digitalRead(7) ; legge lo stato del pin 7 

digitalWrite(pin, value): scrive Arduino. 
LOW o Arduino.HIGH su di un pin digita- 
le settato come uscita. 
Esempio: 

arduino. digitalWrite(5, Arduino. LOW) ; setta come alto il pin 
5 

arduino. digital Write(5, Arduino.HIGH); setta come basso il 
pin 5 

analogRead(pin): restituisce il valore di 
un ingresso analogico (0 - 1023), i pin ana- 
logici di Arduino sono: 0,1,2,3,4. 
Esempio: 




val=arduino.analogRead(0) ; legge il valore dell 'ingresso ana- 
logico 0 

analogWrite(pin, value): genera un se- 
gnale PWM sul pin assegnato. I pin di 
Arduino che supportano la generazione 
del segnale PWM sono: 3, 5, 6, 9, 10, 11. 
II campo value varia tra 0 (PWM 0%) e 255 
(PWM 100%). 
Esempio: 

arduino. anal ogWrite( 10, valTx); scrive sul pin 10 un valore PWM 
che e dato dalla variabile valTx 

Nel Listato 7 riportiamo la porzione di 
codice relativa alia visualizzazione della 
condizione deiringresso analogico. 
Vediamo che, in pratica, per leggere il 
valore basta semplicemente richiamare 
l'opportuna funzione ed indirizzare la 
lettura nel pin di Arduino che ci interessa. 
Questa tecnica e estremamente comoda e 
versatile, ma ha lo svantaggio che Ardui- 
no deve essere programmato con firmdata. 
Se vogliamo far svolgere ad Arduino delle 
funzioni in maniera autonoma, e necessa- 
rio prevedere un'architettura master/slave, 
nella quale Arduino svolge le sue ope- 
razioni e quando interpellate dal master 
risponde; per questa ragione Arduino sara 
programmato con un codice che prevede, 
oltre alle operazioni da svolgere, anche il 
protocollo di comunicazione con il master. 
Se invece vogliamo considerare Arduino 
come una periferica e tutto il programma 
risiede nel PC, allora conviene sfruttare la 
tecnica qui descritta. 

PROSSIME LEZIONI 

Nella prossima puntata introdurremo la 
programmazione ad oggetti, che ci per- 
mettera di costruire gli elementi dell'in- 
terfaccia quali pulsanti, LED, indicatori 
ecc, in una maniera molto piu versatile e 
ci consentira di costruire interfacce com- 
plesse in modo abbastanza semplice. 
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